<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<head>
	<title><spring:message code="label.createTransactionTitle"/></title>
</head>
<sec:authorize access="hasAnyRole('ROLE_USER', 'ROLE_ADMIN')">
<tiles:insertDefinition name="defaultTemplate">
	<tiles:putAttribute name="body">
		<div class="body">
			<div class="col-sm-10 col-md-10">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title"><strong><spring:message code="label.createTransactionTitle"/></strong></h3>
					</div>
					<!-- message -->
					<c:if test="${not empty mess}">
					<c:set var="message" scope="request"><spring:message code="label.transSuccess" /></c:set>
					
						<c:if test="${mess ne message}">
							<div class="alert alert-warning"><strong>${mess}</strong></div>
						</c:if>
						<c:if test="${mess eq message}">
							<div class="alert alert-success"><strong>${mess}</strong></div>
						</c:if>
					</c:if>
					<!--create form  -->
					<form action="createtrans" method="POST">
							<!-- pop up confirm -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">

											<button type="button" class="close" data-dismiss="modal">
												<span aria-hidden="true">&times;</span><span class="sr-only"><spring:message code="label.close"/></span>
											</button>
											<h4 class="modal-title" id="myModalLabel"><spring:message code="label.transactionConfirm"/></h4>
										</div>
										<div class="modal-body"><spring:message code="label.question"/></div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal"><spring:message code="label.close"/></button>
											<button type="submit" class="btn btn-primary"><spring:message code="label.yes"/></button>
										</div>
									</div>
								</div>
							</div>
							
							<div class="table-responsive">
							<!-- datatable -->
							<table class="table table-hover">
							<tbody>
								<tr>
									<td style="white-space: nowrap;"><strong><spring:message code="label.sourceAccount"/></strong></td>
									<td>
										<select class="selectpicker form-control"
										name="txtSourceAccount">
											<c:forEach items="${accountinfo}" var="accountinfo">
												<option value="${accountinfo.idaccountInfo}">
												<fmt:formatNumber pattern="0000000000" value="${accountinfo.idaccountInfo}" />
													</option>
											</c:forEach>
										</select>
									</td>
									<td>
										<strong><spring:message code="label.targetAccount"/></strong>
										<br>
										<font color="#33657E"><small><spring:message code="label.accountToNote"/></small> </font>								
									</td>
									<td>
										<input type="text" class="form-control" maxlength="10"
										name="txtTargetAccount" id="txtTargetAccount"
										placeholder="<spring:message code="label.accountToPlaceHolder" />" value="${targetAccount}"
										required data-toggle="tooltip" data-placement="left" title="Choose account to">
									</td>
								</tr>
								<tr>
									<td>
										<strong><spring:message code="label.amount"/></strong>
										<br>
										<font color="#33657E"><small><spring:message code="label.amountNote"/> &#8363; </small> </font>								
									</td>
									<td>
										<div class="input-group">
											<input type="text" class="form-control" id="txtAmount" autocomplete="off"
												placeholder="<spring:message code="label.amountPlaceHolder" />"  value="<fmt:formatNumber pattern="#,##0"
														value="${amount}" />" required>
											<span class="input-group-addon">&#8363;</span>
										</div>
									</td>
									<td>
										<strong><spring:message code="label.date"/></strong>
									</td>
									<td>
										
											<input name="date" id="date" type="text" required 
												class="form-control" placeholder="Pick date" readonly="readonly" >
											
									
									</td>
								</tr>
								<tr>
									<td>
										<strong><spring:message code="label.description"/></strong>
									<br>
										<font color="#33657E"><small><spring:message code="label.descriptionNote"/></small> </font>					
									</td>
									<td colspan="3">
										<textarea name="txtDescription" maxlength="200"
											class="form-control" rows="3" placeholder="..."
											id="txtDescription" required>${description}</textarea>
									</td>
								</tr>
								<tr>
									
									<td colspan="4" align="right">
									<button class="btn btn-lg btn-primary"
											type="button" id="btnClear"><spring:message code="label.clear"/></button>	
									<button class="btn btn-lg btn-primary"
											type="button" data-toggle="modal" data-target="#myModal" value="submit" name="submit"><spring:message code="label.create"/></button>																				
									</td>
								</tr>
							</tbody>
						</table>
						</div>
						<input  type="text" name="txtAmountTranfer" id="ThousandSeperator_num" value="${amount}">
						<input type="text" name="txtDate" id="txtDate">
					</form>
				</div>
			</div>
		</div>
		<!--//body  -->
	</tiles:putAttribute>
</tiles:insertDefinition>
</sec:authorize>

<!-- javascript -->
<script>

//clear button

	$("#btnClear").click(function() {
		$('#txtTargetAccount').val("");
		$('#txtAmount').val("");
		$('#txtDescription').val("");
	})

	//active panel
	$("#createtrans").addClass('active1'); // activated list-item
	//datetimepicker
	$('#date').datetimepicker({
		defaultDate : new Date()
	}).data("DateTimePicker").disable();
	$('#txtDate').hide();
	var dateString = $('#date').val();
	$('#txtDate').val(dateString);
	
	
	

	//disable advance search
	$("#advanceSearch").hide();
	//amount
	$("#ThousandSeperator_num").hide();
	//not allow to input character
	$('#txtTargetAccount').keyup(function(event) {
		// skip for arrow keys
		//only allow number "/\D/g"
		$(this).val(function(index, value) {
			return value.replace(/\D/g, "");
		});

	});

	//add commas
	$(document).ready(function() {
		var textbox = '#txtAmount';
		var hidden = '#ThousandSeperator_num';
		//tu them dau phay vao so
		$('#txtAmount').keyup(function(event) 
				{
											// skip for arrow keys
											// 											if (event.which >= 37
											// 													&& event.which <= 40) {
											// 												event.preventDefault();
											// 											}
				$(this).val(function(index,value) 
						{
					//replace leading zero replace(/^0+(?!\.|$)/, '')
							return value.replace(/\D/g,"").replace(/\B(?=(\d{3})+(?!\d))/g,",").replace(/^0+(?!\.|$)/, '');
						});
				});
						
	$("#txtAmount").keyup(function() {
							//Clear the hidden field
							$("#ThousandSeperator_num").val("");
							//Create char array from phone number field
							var charArray = $(this).val().split("");
							var amountNumber = "";
							//Iterate over each character in the char array
							//and determine if it is a number
							$.each(charArray, function(index, value) {
								if (!isNaN(value) && value != " ") {
									amountNumber = amountNumber + value;
								}
							});
							//Set hidden field
							$("#ThousandSeperator_num").val(amountNumber);
						});
					});
	//list account to
	$(function() {
		var availableTags = ${translist};
		$("#txtTargetAccount").autocomplete({
			source : availableTags
		});
	});
</script>
